:root {
  --color-text: #000;
  --color-text-p2: rgba(0, 0, 0, 0.62);
  --color-border-form: rgba(0, 0, 0, 0.42);
  --color-border: rgba(0, 0, 0, 0.2);
  --color-border-p2: rgba(0, 0, 0, 0.1);
  --color-icon: rgba(0, 0, 0, 0.62);
  --color-link: var(--primary);
  --color-link-visited: #4f2bbb;
  --color-fill: rgba(0, 0, 0, 0.03);
  --color-fill-table-row-odd: rgba(0, 0, 0, 0.08);
  --color-fill-table-row-even: rgba(0, 0, 0, 0.03);
  --color-fill-form-element: var(--color-fill);
  --color-fill-current: rgba(0, 0, 0, 0.62);
  --color-fill-disabled: rgba(0, 0, 0, 0.15);
  --color-fill-hover: rgba(37, 118, 195, 0.2);
  --color-fill-focus: rgba(37, 118, 195, 0.3);
  --color-fill-active: var(--primary);
  --highlighter-fill: #fc0;
  --shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
  --bg: #fff;
  --bg-hover: color(var(--bg) contrast(100%) blend(var(--bg) 90%));
  --primary: #1960a4;
  --secondary: #999;
  --error: #900;
  --error-fill: rgba(149, 29, 18, 0.2);
  --danger: #900;
  --warn: #943e00;
  --warn-fill: rgba(215, 137, 88, 0.2);
  --success: #070;
  --success-fill: rgba(51, 117, 30, 0.2);
  --control-margin-bottom: 1rem;
  --control-min-size-touch: 44px;
  --control-min-size-desktop: 24px;
  --control-label-margin-bottom: 0.25rem;
  --radius: 6px;
  --gutter: 1rem;
  --gutter-static: 15px;
  --gutter-static-one-third: calc(var(--gutter-static) / 3);
  --gutter-static-two-thirds: calc(var(--gutter-static-one-third) * 2);
  --input-horizontal-padding: var(--gutter-static-one-third);
  --input-vertical-padding: 0;
  --container-max-width: 80rem;

  /**
   * Font-size
   * Size ratios from Fonts Module Level 3
   * https://www.w3.org/TR/css-fonts-3/#propdef-font-size
   */
  --line-height: 1.5;
  --font-size-x-small: 0.857142rem;
  --font-size-small: 0.857142rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.3rem;
  --font-size-x-large: 1.7143rem;
  --font-size-xx-large: 2.2858rem;

  /**
   * Font-weights
   */
  --text-weight-black: 900;
  --text-weight-bold: 700;
  --text-weight-medium: 600;
  --text-weight-regular: 400;
  --text-weights-are-bolder: 0;
  --text-weight-basis: var(--text-weight-regular);
  --text-weight-addition-factor: 200;
  --text-weight-headline-basis: 600;
  --text-weight-headline-addition-factor: 100;
  --text-weight: calc(var(--text-weight-basis) + ( var(--text-weight-addition-factor) * var(--text-weights-are-bolder)));
  --text-weight-headline: var(--text-weight-bold);
  --text-weight-button: var(--text-weight-bold);
}

/* Lean on min-width queries to create mobile-first CSS. */
@custom-media --small-up (min-width: 321px);
@custom-media --medium-up (min-width: 641px);
@custom-media --large-up (min-width: 1025px);
@custom-media --x-large-up (min-width: 1441px);
@custom-media --xx-large-up (min-width: 1921px);

/* Use these max-width queries as infrequently as possible. */
@custom-media --small (max-width: 640px);
@custom-media --medium-down (max-width: 1024px);
@custom-media --medium (min-width: 641px) and (max-width: 1024px);
@custom-media --large (min-width: 1025px) and (max-width: 1440px);
@custom-media --x-large (min-width: 1441px) and (max-width: 1920px);
